<template>
  <div class="Message-board pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>留言板
    </div>
    <div class="section">
      <div class="content">
        <div class="tab-box">
          <div
              class="tab"
              :class="{ tabActive: tabActive === 0 }"
              @click="changeTab(0)"
          >
            <div class="tab-label">我的留言</div>
            <div class="line"></div>
          </div>
          <div
              class="tab"
              :class="{ tabActive: tabActive === 1 }"
              @click="changeTab(1)"
          >
            <div class="tab-label">别人给我留言</div>
            <div class="line"></div>
          </div>
        </div>
<!--        我的留言-->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="tabActive === 0">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            @load="onLoad"
          >
            <div v-if="list.length > 0">
              <div class="item" v-for="(item, index) in list" :key="index">
                <div class="top flex-align">
                  <img :src="item.sendUseePic || img" alt="" />
                  <span>{{ item.sendUseeName }}</span>
                </div>
                <div class="message">{{ item.message }}</div>
                <div class="time">{{ item.updateTime }}</div>
              </div>
            </div>
            <div class="empty" v-else>
              <img
                style="width: 100%"
                src="../assets/img/common-empty.png"
                alt=""
              />
            </div>
          </van-list>
        </van-pull-refresh>
<!--        别人给我留言-->
        <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" v-if="tabActive === 1">
          <van-list
              v-model="loading2"
              :finished="finished2"
              :finished-text="finishedText2"
              @load="onLoad2"
          >
            <div v-if="list2.length > 0">
              <div class="item" v-for="(item, index) in list2" :key="index">
                <div class="top flex-align">
                  <img :src="item.sendUseePic || img" alt="" />
                  <span>{{ item.sendUseeName }}</span>
                </div>
                <div class="message">{{ item.message }}</div>
                <div class="time">{{ item.updateTime }}</div>
              </div>
            </div>
            <div class="empty" v-else>
              <img
                  style="width: 100%"
                  src="../assets/img/common-empty.png"
                  alt=""
              />
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import { getMessageBoard } from "@/api/activity";
export default {
  data() {
    return {
      tabActive: 0,
      params: {
        pageNo: 1,
        pageSize: 10,
        type: 1
      },
      params2: {
        pageNo: 1,
        pageSize: 10,
        type: 0
      },
      img: require("../assets/img/head.png"),
      list: [],
      list2: [],
      loading: false,
      loading2: false,
      finished: false,
      finished2: false,
      refreshing: false,
      refreshing2: false,
      finishedText: "没有更多了",
      finishedText2: "没有更多了",
    };
  },
  created() {
    if (!localStorage.getItem("jyToken")) {
      return this.$router.replace({
        name: "Login",
        query: { dirUrlName: "MessageBoard" },
      });
    }
  },
  methods: {
    changeTab(type) {
      this.tabActive = type;
    },
    onLoad() {
      if (!localStorage.getItem("jyToken")) {
        return;
      }
      getMessageBoard(this.params)
        .then((res) => {
          console.log(res,"我的留言");
          if (res.code === 0) {
            let data = res.data;
            console.log(data);
            if (this.refreshing) {
              this.list = [];
              this.refreshing = false;
            }
            if (this.params.pageNo === 1) {
              this.list = data.records;
            } else {
              this.list = this.list.concat(data.records);
            }
            this.loading = false;
            if (this.list.length >= data.total) {
              this.finished = true;
            } else {
              this.params.pageNo++;
            }
            if (this.list.length === 0) this.finishedText = "暂无数据";
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("数据获取失败，请稍后重试！");
        });
    },
    onLoad2() {
      if (!localStorage.getItem("jyToken")) {
        return;
      }
      getMessageBoard(this.params2)
          .then((res) => {
            console.log(res,"别人给我留言");
            if (res.code === 0) {
              let data = res.data;
              if (this.refreshing2) {
                this.list2 = [];
                this.refreshing2 = false;
              }
              if (this.params2.pageNo === 1) {
                this.list2 = data.records;
              } else {
                this.list2 = this.list2.concat(data.records);
              }
              this.loading2 = false;
              if (this.list2.length >= data.total) {
                this.finished2 = true;
              } else {
                this.params2.pageNo++;
              }
              if (this.list2.length === 0) this.finishedText2 = "暂无数据";
            } else {
              this.$toast(res.msg);
            }
          })
          .catch((err) => {
            this.$toast("数据获取失败，请稍后重试！");
          });
    },
    onRefresh() {
      this.params.pageNo = 1;
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onRefresh2() {
      this.params2.pageNo = 1;
      // 清空列表数据
      this.finished2 = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading2 = true;
      this.onLoad2();
    },
  },
};
</script>
<style lang="less" scoped>
.Message-board {
  background: #f6f7f8;
  .content {
    padding: 16px 16px 20px;
    .item {
      background: #ffffff;
      border-radius: 6px;
      padding: 15px;
      margin-bottom: 14px;
      .top {
        img {
          width: 26px;
          height: 26px;
          background: #c4c4c4;
          border-radius: 50%;
          margin-right: 10px;
        }
        span {
          font-size: 12px;
          font-weight: 600;
          color: #363a44;
        }
      }
      .message {
        font-size: 14px;
        color: #363a44;
        padding: 12px 0;
      }
      .time {
        font-size: 11px;
        font-weight: 400;
        color: #686b73;
      }
    }
  }
}
.tab-box {
  height: 64px;
  display: flex;
  align-items: center;
  .tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .tab-label {
      font-size: 14px;
      color: #7f7f7f;
    }
    .line {
      width: 16px;
      height: 2px;
      background: #fd7895;
      border-radius: 4px;
      margin-top: 3px;
      display: none;
    }
  }
  .tabActive {
    .tab-label {
      color: #fd7895;
    }
    .line {
      background: #fd7895;
      display: block;
    }
  }
}
</style>
